import './index.scss'

import { useState } from 'react'
import { useMount } from 'ahooks'
import { Avatar, Dropdown } from 'antd'
import { useNavigate } from 'react-router-dom'

import { A01, A02, A03, A04 } from './Common'
import { GetIndexedDB } from '../../Utils/IndexedDB'

const UserList = { A01, A02, A03, A04 }
const UserA01 = () => {

    const Navigate = useNavigate()
    const [Theme, setTheme] = useState()
    const [userInfo, setUserInfo] = useState({ full: '加载...', role: '加载...' })

    useMount(async () => {
        const { UserSet } = await GetIndexedDB('theme')
        const User = await GetIndexedDB('user')
        const redis = await GetIndexedDB('redis')

        const { role } = redis
        const { fullName, userRoles } = User
        const roleName = role[userRoles[0]]
        setTheme(UserSet)
        setUserInfo({ full: fullName, role: roleName })
    })

    if (Theme) {
        const {
            list, trigger, blurState, blurColor, blurFilter,
            avatarStatus, avatarType, avatarSize, avatarBackColor, avatarTextColor, avatarTextWeight, avatarTextFamily,
            roleStatus, roleSize, roleColor, roleWeight, roleFamily,
            userStatus, userSize, userColor, userWeight, userFamily,
        } = Theme


        const items = list.map(key => UserList[key](Navigate))


        return (
            <Dropdown menu={{ items }} trigger={[items.length !== 0 && trigger]} placement="bottomRight" arrow={{ pointAtCenter: true }}>
                <div
                    className="userTemplate UserA01"
                    style={{
                        '--blurColor': blurColor,
                        '--blurFilter': blurFilter,
                        '--avatarBackColor': avatarBackColor,
                        '--avatarTextColor': avatarTextColor,
                        '--avatarTextWeight': avatarTextWeight,
                        '--avatarTextFamily': avatarTextFamily,

                        '--roleSize': roleSize,
                        '--roleColor': roleColor,
                        '--roleWeight': roleWeight,
                        '--roleFamily': roleFamily,
                        '--userSize': userSize,
                        '--userColor': userColor,
                        '--userWeight': userWeight,
                        '--userFamily': userFamily,
                    }}>
                    {blurState && <div className='mask' />}
                    {avatarStatus &&
                        <Avatar className='Avatar' shape={avatarType} size={avatarSize}>
                            {userInfo.role[0]}
                        </Avatar>
                    }
                    <div>
                        {roleStatus && <div className='role'>{userInfo.role}</div>}
                        {userStatus && <p className='name'>{userInfo.full}</p>}
                    </div>
                </div>
            </Dropdown>
        )
    }


};

export default UserA01;